import React from 'react';
import { Space, Button, Tooltip, Popconfirm } from 'antd';
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';

interface BaseRecord {
  id: number;
  slug: string;
}

interface TableActionColumnProps<T extends BaseRecord> {
  record: T;
  onEdit?: (record: T) => void;
  onDelete?: (id: number) => void;
  onPreview?: (record: T) => void;
  editTooltip?: string;
  deleteTooltip?: string;
  previewTooltip?: string;
  deleteConfirmTitle?: string;
  deleteConfirmOkText?: string;
  deleteConfirmCancelText?: string;
  showEdit?: boolean;
  showDelete?: boolean;
  showPreview?: boolean;
}

export default function TableActionColumn<T extends BaseRecord>({
  record,
  onEdit,
  onDelete,
  onPreview,
  editTooltip = '编辑',
  deleteTooltip = '删除',
  previewTooltip = '预览',
  deleteConfirmTitle = '确定要删除这条记录吗？',
  deleteConfirmOkText = '确定',
  deleteConfirmCancelText = '取消',
  showEdit = true,
  showDelete = true,
  showPreview = true
}: TableActionColumnProps<T>) {
  return (
    <Space size="small">
      {showPreview && onPreview && (
        <Tooltip title={previewTooltip}>
          <Button 
            type="text" 
            icon={<EyeOutlined />} 
            onClick={() => onPreview(record)}
          />
        </Tooltip>
      )}
      
      {showEdit && onEdit && (
        <Tooltip title={editTooltip}>
          <Button 
            type="text" 
            icon={<EditOutlined />} 
            onClick={() => onEdit(record)}
          />
        </Tooltip>
      )}
      
      {showDelete && onDelete && (
        <Popconfirm
          title={deleteConfirmTitle}
          onConfirm={() => onDelete(record.id)}
          okText={deleteConfirmOkText}
          cancelText={deleteConfirmCancelText}
        >
          <Tooltip title={deleteTooltip}>
            <Button type="text" danger icon={<DeleteOutlined />} />
          </Tooltip>
        </Popconfirm>
      )}
    </Space>
  );
} 